<template>
  <div class="bimbox-container">
    <div class="nav">
      <Header></Header>
    </div>
    <el-button @click='showNewClientBox' type="primary" style="width:100%;">新增</el-button>
    <el-table :data='getUserInfo.clients' style="width:100%;" id="clientTable">
      <el-table-column prop='name' label="名称"></el-table-column>
      <el-table-column prop='unit' label="单位"></el-table-column>
      <el-table-column prop='phone' label="联系人"></el-table-column>
      <el-table-column label="编辑">
        <template scope="scope">
          <el-button type="primary" icon="edit" size="small" @click="editClient(scope.$index,scope.row)">编辑</el-button>
          <el-button size="small" type="danger" icon="delete" @click="deleteClient(scope.$index,scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; flex-direction: row; margin: 1rem">
      <el-button icon="arrow-left" type="primary">上一页</el-button>

      <el-button type="primary">下一页<i class="el-icon-arrow-right"></i></el-button>
    </div>
    <el-dialog size="large" title="新建Client" v-model="newClientBox" @open="ClientDialogOpen">
      <el-form @keyup.enter.native="" label-posit ion="top" :model="clientForm" :rules="ClientFormRules"
               ref="clientBox">
        <el-form-item label="Client名称" prop="name">
          <el-input v-model="clientForm.name" auto-complete="off" :autofocus="newClientBox"
                    ref="clientName"></el-input>
        </el-form-item>
        <el-form-item label="clientId" prop="unit">
          <el-input v-model="clientForm.unit" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="clientPwd" prop="phone">
          <el-input v-model="clientForm.phone" auto-complete="off"></el-input>
        </el-form-item>
        <!--头像：-->

        <!--<ul class="bim-project-avatar">

                        <li :class="avatar_link.name==accountForm.avatar_link?'hot':''" v-for="avatar_link in thumbnails">
                            <img @click="ttt(avatar_link)" :src="'/static/img/building/'+avatar_link.name">
                        </li>

                        <li style="position:relative" v-show="false"><img src="../../assets/img/blank.gif">
                            <a style="position: absolute;top:20px;display: block;width:100%;height:100%;line-height: 18px;" href="javascript:void"><i class="fa fa-upload"></i><br>自己上传</a>
                        </li>
                    </ul>-->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newClientBox = false">取 消</el-button>
        <el-button type="primary" :disabled="isProjectSaveFetching" :loading="isProjectSaveFetching"
                   @click=newAccountSubmit()>确 定
        </el-button>
      </div>
    </el-dialog>
    <div class="footer"></div>
  </div>
</template>

<script lang='ts'>
  import Header from '../../components/Header'
  import {mapGetters, mapActions} from 'vuex'
  export default {
    data () {
      const validName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入项目名称'))
        } else if (!(/^[a-zA-Z0-9_\u4e00-\u9fa5]{2,20}$/.test(value))) {
          callback(new Error('请输入2~20之间的字母数字或下划线'))
        } else {
          callback()
        }
      }
      return {
        getAllClient: {
          client: [
            {
              name: 1,
              clientId: 2,
              clientPwd: 3
            },
            {
              name: 1,
              clientId: 2,
              clientPwd: 3
            }
          ]
        },
        ClientFormRules: {
          name: [{
            validator: validName,
            trigger: 'blur'
          }],

          max_member_count: [
            {
              required: true,
              message: '请输入人数'
            },
            {
              type: 'number',
              max: 10000,
              min: 10,
              message: '人数必须是10~10000之间的整数'
            }
          ],
          max_storage_size: [
            {
              required: true,
              message: '请输入整数'
            },
            {
              type: 'number',
              max: 2000,
              min: 20,
              message: '项目存储空间最少20G，最多2T'
            }
          ]

        },
        clientForm: {
          name: 1,
          unit: 1,
          phone: 1
        },
        isProjectSaveFetching: false,
        newClientBox: false,
        isClientAddFetching: false,
        clientUpdateId: ''
      }
    },
    components: {
      Header
    },
    computed: mapGetters([
      'getUserInfo'
    ]),
    methods: {
      ...mapActions([]),
      showNewClientBox () {
        this.clientForm.name = ''
        this.clientForm.unit = ''
        this.clientForm.phone = ''
        this.isClientAddFetching = true
        this.newClientBox = true
      },
      newAccountSubmit () {
        let data = this.clientForm
        if (this.isClientAddFetching) {
          this.$store.dispatch('addClient', data).then((res) => {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.newClientBox = false
          }).catch((err) => {
            this.$message({
              type: 'error',
              message: '添加失败'
            })
            console.log(err)
          })
        } else {
          data.id = this.clientUpdateId
          this.$store.dispatch('updateClient', data).then((res) => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.newClientBox = false
          }).catch((err) => {
            this.$message({
              type: 'error',
              message: '修改失败'
            })
            console.log(err)
          })
        }
      },
      ClientDialogOpen () {
        this.newClientBox = true
      },
      deleteClient (index, row) {
        console.log(row)
        this.$confirm('此操作将删除client, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: row.id,
            name: row.name,
            unit: row.unit,
            phone: row.phone
          }
          this.$store.dispatch('deleteClient', data).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          }).catch(() => {
            this.$message({
              type: 'error',
              message: '系统错误'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      editClient (index, row) {
        console.log(row)
        this.isClientAddFetching = false
        this.clientUpdateId = row.id
        this.clientForm.name = row.name
        this.clientForm.unit = row.unit
        this.clientForm.phone = row.phone
        this.newClientBox = true
      }
    },
    created: () => {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>
